{% include "public/head.html" %}
{% include "public/left.html" %}
{% include "public/header.html" %}
<style>
    .error{
        border:2px solid #ff4757 !important;
    }
    .error_color{
        color: #ff4757;
    }
    .img_show{
        width: 500px;
        display: none;
    }
</style>
        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                    <div class="form-group col-md-12">
                                        <label for="title">标题  <span class="valid">max:50,min:6</span></label>
                                        <input type="text" class="form-control" id="title" name="title" value="" validate rule="max:50,min:6" placeholder="请输入标题" />
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12" for="g_id">广告位选择</label>
                                        <div class="col-xs-12">
                                            <select class="form-control" id="g_id" name="g_id" size="1">
                                                {% for k,v in dataGG %}
                                                    <option value="{{ k }}">{{ v }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="content">内容 <span class="valid">min:10</span></label>
                                        <textarea type="text" class="form-control" id="content" name="content" validate rule="min:10" placeholder="请输入内容"></textarea>
                                    </div>
                                <div class="form-group col-md-12">
                                        <label for="pic_file">上传图片</label>
                                        <input type="file" style="display: none" id="pic_file" name="pic_file" accept="image/gif,image/jpeg,image/jpg,image/png"/>
                                    </div>
                                <div class="form-group col-md-12">
                                    <input type="hidden" name="pic" id="pic" />
                                    <img src="" class="img_show" id="pic_show"/>
                                </div>
                                <div class="form-group col-md-12">
                                    <input type="button" class="btn btn-primary ajax-post" target-form="add-form" onclick="$('#pic_file').click()" value="上传图片" />
                                </div>
                                <div class="form-group col-md-12">
                                        <label for="order">排序 <span class="valid">isNumber</span></label>
                                        <input class="form-control" type="text" id="order" name="order" validate rule="isNumber" value="" />
                                    </div>
                                    <div class="form-group col-md-12">
                                        <button type="button" class="btn btn-primary ajax-post" target-form="add-form" name="advert_submit" disabled id="ok_submit">确 定</button>
                                        <button type="button" class="btn btn-default" id="backs">返 回</button>
                                    </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
{% include "public/footer.html" %}
<script type="text/javascript">
    //使用严格模式
    "use strict";
    let backs = document.getElementById('backs');
    backs.addEventListener('click',function () {
        window.location.href = '/admin/advert';
    });

    //上传图片
    $("#pic_file").on('change',function(){
        var file = document.getElementById('pic_file').files[0];
        var formData = new FormData();
        formData.append('file',file);
        lightyear.loading('show');
        AjaxUpload("{{url}}/admin/advert/upload",'POST',formData,function(res){
            const reS = JSON.parse(res);
            if(reS.status == 1){
                document.getElementById('pic_show').style.display = 'block';
                document.getElementById('pic_show').setAttribute('src','{{ url }}'+reS.data);
                document.getElementById('pic').value = reS.data;
                lightyear.loading('hide');
                lightyear.notify(reS.message,'success',1000)
            }else{
                lightyear.notify('上传失败','success',1000)
                lightyear.loading('hide');
            }
        });
    });


    //进行提交操作
    document.getElementById('ok_submit').addEventListener('click',function(event){
        //获取所有的表单，组合成数组
        let inputs = document.querySelectorAll("[type='text'],select,[type='hidden']");
        let data = [];
        inputs.forEach((input,i) => {
            const name = input.getAttribute('name');
            data[name] = input.value;
        });
        lightyear.loading('show');
        LH.post('/admin/advert/add_do',data,{
            responseType:'json'
        }).then((response) => {
            if(response.status == 1){
                lightyear.loading('hide');
                lightyear.notify(response.message,'success',1000);
                window.location.href = '{{url}}/admin/advert';
            }
        });
    });

    //验证处理类
    class Validate{
        //最小的长度
        min(value,len){
            return value.length >= len;
        }
        //最大的长度
        max(value,len){
            return value.length <= len;
        }
        //是否是数字
        isNumber(value){
            return /^\d+$/.test(value);
        }
    }

    //代理工厂
    function makeProxy(target) {
        return new Proxy(target,{
            //获取代理对象
            get(target,key){
                //返回当前的代理对象
                return target[key];
            },
            //target 当代理的对象  key 当前代理对象的键 el当前操作的对象
            set(target,key,el){
                const rules = el.getAttribute('rule');
                const validate = new Validate();
                //查看当前元素的规则是不是都符合要求
                //使用every 所有都符合要求就返回true   否则返回false
                let state = rules.split(',').every(rule => {
                    const info = rule.split(':');
                    // ["max", "50"]
                    //调用方法判断当前的规则是不是都符合条件
                    return validate[info[0]](el.value,info[1]);
                });
                el.classList[!!state ? 'remove' : 'add']('error');
                el.parentNode.children[0].children[0].classList[!!state ? 'remove' : 'add']('error_color');
                if(rules == 'isNumber'){
                    el.value = !!state ? el.value : '';
                }
                return true;
            }
        });
    }

    const inputs = makeProxy(document.querySelectorAll("[validate]"));
    const spans = document.querySelectorAll('.valid');
    inputs.forEach((item,i) => {
        item.addEventListener("keyup",function () {
            inputs[i] = this;
            let error_arr = [];
            spans.forEach(span => {
                const class_list = span.getAttribute('class');
                const class_arr = class_list.split(' ');
                error_arr = [...error_arr,...class_arr];
            });
            let submit_show = [...inputs].every(inp => {
                return inp.value.length;
            });
            //判断当前类是否有错误类
            let only_arr = new Set(error_arr);
            let show = (submit_show && only_arr.size == 1),ok_submit = document.getElementById('ok_submit');
            show ? ok_submit.removeAttribute('disabled') : ok_submit.setAttribute('disabled',true);
        });
    });




</script>